<template>
    <div class="userBox">
        <div class="usersTitle">
            <div class="titleText">{{ pageTitle }}</div>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="头像">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :http-request="uploadImg">
                    <el-image class="userHeaderImage" :src="ruleForm.photoUrl" fit="cover"></el-image>
                </el-upload>
            </el-form-item>
            <el-form-item label="用户名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="登陆账号" prop="account">
                <el-input v-model="ruleForm.account" disabled placeholder="请输入登陆账号"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="请输入登陆账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <div class="passwordBox">
                    <el-input v-model="ruleForm.password" placeholder="请输入密码" show-password :disabled="!isEditorPassword"></el-input>
                    <el-button @click="isEditorPassword = true" v-if="!isEditorPassword" type="text" class="passwordBtn">修改</el-button>
                    <el-button @click="isEditorPassword = false" v-if="isEditorPassword" type="text" class="passwordBtn">取消</el-button>
                </div>
            </el-form-item>
            <el-form-item label="确认密码" prop="affirmPassword" v-if="isEditorPassword">
                <el-input v-model="ruleForm.affirmPassword" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <!-- <el-form-item label="头像">
                <el-input v-model="ruleForm.photoUrl" placeholder="请输入头像地址"> </el-input>
            </el-form-item> -->
            <el-form-item label="权限" prop="permission">
                <el-radio-group v-model="ruleForm.permission" disabled>
                    <el-radio label="1">管理员</el-radio>
                    <el-radio label="0">普通用户</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="$router.back(-1)">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts">
import { name, account, password, affirmPassword, phone } from '../../utils/formValidate'
import publicFunction from '../../utils/publicFunction'
export default {
    data() {
        return {
            pageTitle: '修改个人信息',
            ruleForm: {
                id: '',
                name: '',
                account: '',
                phone: '',
                password: '',
                affirmPassword: '',
                photoUrl: '',
                permission: ''
            },
            rules: {
                name: [{ required: true, validator: name, trigger: 'blur' }],
                account: [{ required: true, validator: account, trigger: 'blur' }],
                phone: [{ required: true, validator: phone, trigger: 'blur' }],
                password: [{ required: true, validator: password, trigger: 'blur' }],
                affirmPassword: [{ required: true, validator: affirmPassword, trigger: 'blur' }],
                permission: [{ required: true, message: '请选择用户权限', trigger: 'submit' }]
            },
            isEditorPassword: false
        }
    },
    mounted() {
        ;(this as any).getUserMsg()
    },
    methods: {
        submitForm(formName: string) {
            ;(this as any).$refs[formName].validate((valid: any) => {
                if (valid) {
                    ;(this as any).ruleForm.id = (this as any).$route.params.id
                    ;(this as any).$request.postJson('/api/oa/users/update', (this as any).ruleForm).then((res: any) => {
                        if (res.code == 200) {
                            ;(this as any).$message.success('修改成功')
                            setTimeout(() => {
                                ;(this as any).$router.back(-1)
                                ;(this as any).$request.get(`/api/oa/users/info/${(this as any).$route.params.id}`).then((res: any) => {
                                    if (res.code == 200) {
                                        ;(this as any).$store.commit('set_userInfo', res.data)
                                    }
                                })
                            }, 500)
                        }
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        // resetForm(formName: string) {
        //     ;(this as any).$refs[formName].resetFields()
        // },
        getUserMsg() {
            ;(this as any).$request.get(`/api/oa/users/info/${(this as any).$route.params.id}`).then((res: any) => {
                if (res.code == 200) {
                    const data: any = res.data
                    ;(this as any).ruleForm.name = data.name
                    ;(this as any).ruleForm.account = data.account
                    ;(this as any).ruleForm.phone = data.phone
                    ;(this as any).ruleForm.password = data.password
                    ;(this as any).ruleForm.affirmPassword = data.password
                    ;(this as any).ruleForm.photoUrl = data.photoUrl
                    ;(this as any).ruleForm.permission = data.permission
                }
            })
        },
        uploadImg(file: any) {
            const File = file.file
            publicFunction.upLoadFiles(File, (data: string) => {
                if (data) {
                    ;(this as any).ruleForm.photoUrl = data
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.userBox {
    background: #ffffff;
    padding: 20px;
    .usersTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 25px;
        padding-bottom: 15px;
        .titleText {
            font-weight: 600;
        }
        .titlesBrn {
            width: 100px;
        }
    }
    .demo-ruleForm {
        width: 500px;
    }
    .upload-demo {
        height: 100px;
        .userHeaderImage {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            overflow: hidden;
        }
    }
    .passwordBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .passwordBtn {
            margin-left: 10px;
        }
    }
}
</style>
